<template>
  <div class="one article-base">
    <el-form
      ref="articleForm"
      :model="articleForm"
      :rules="articleFormRule"
      class="demo-articleForm"
      size="small"
      label-width="120px"
      :show-message="showMessage"
    >
      <!-- 这个好像不要了 -->
      <el-row v-if="articleForm.workflowStatuId == (9 | 11)">
        <el-col :span="24">
          <el-form-item label="审核人:" prop="shrids">
            <el-col :span="16">
              <el-input
                v-model="articleForm.shrids"
                class="ib"
                readonly
                v-if="false"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-button
                @click="
                  shareCloumn(null, '选择本网站其他栏目', articleForm.siteAlias)
                "
                >重新选择</el-button
              >
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="定时发布时间:" prop="dsfbsj">
            <el-date-picker
              v-model="articleForm.dsfbsj"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              style="width: 100%"
              popper-class="no-secend"
              :picker-options="{
                disabledDate(time) {
                  return time.getTime() < Date.now();
                },
              }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="visible.shijian">
        <el-col :span="8">
          <el-form-item label="发布时间:" prop="createdDate">
            <el-date-picker
              v-model="articleForm.createdDate"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="文章发布期限:"
            class="titletwolocation"
            prop="expiredDate"
          >
            <el-date-picker
              v-model="articleForm.expiredDate"
              type="date"
              placeholder="选择日期"
              :clearable="false"
              value-format="yyyy-MM-dd"
              style="width: 90%"
            >
            </el-date-picker>
            <el-tooltip
              class="item"
              effect="dark"
              content="不包括此日"
              placement="top"
            >
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item
            label="首页显示期限:"
            class="titletwolocation"
            prop="expiredDateForIndex"
          >
            <el-date-picker
              v-model="articleForm.expiredDateForIndex"
              type="date"
              placeholder="选择日期"
              :clearable="false"
              value-format="yyyy-MM-dd"
              style="width: 130px"
            >
            </el-date-picker>
            <el-checkbox v-model="articleForm.checked3" @change="change2"
              >设置同文章发表期限</el-checkbox
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题" prop="header">
            <el-input
              v-model.trim="articleForm.header"
              clearable
              @blur="validHeader2"
              maxlength="50"
              show-word-limit
              style="width: calc(100% - 0px)"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span='8'>
          <el-form-item>
          </el-form-item>
        </el-col> -->
      </el-row>
      <template v-if="visible.fubiaoti">
        <el-row>
          <el-col :span="16">
            <el-form-item label="副标题">
              <el-input
                v-model="articleForm.subHead"
                maxlength="30"
                style="width: calc(100% - 0px)"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="显示位置选项" class="titletwolocation">
              <el-radio-group v-model="articleForm.subheadLocation">
                <el-radio :label="1">标题上方</el-radio>
                <el-radio :label="0">标题下方</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="副标题2">
              <el-input
                v-model="articleForm.subHead2"
                maxlength="30"
                style="width: calc(100% - 0px)"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="显示位置选项" class="titletwolocation">
              <el-radio-group v-model="articleForm.subheadLocation2">
                <el-radio :label="1">标题上方</el-radio>
                <el-radio :label="0">标题下方</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <!-- 责任编辑 -->
      <el-row v-hasRole="['zrbjr']">
        <el-col :span="24">
          <el-form-item label="责任编辑:" :prop="otherFormProp.zrbjr">
            <el-input
              v-model.trim="articleForm.zrbjr"
              class="ib"
              maxlength="20"
              style="width: calc(100% - 0px)"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-form-item label="作者和部门:">
          <el-row>
            <el-col :span="10">
              <el-form-item
                label="第一作者:"
                class="titletwolocation"
                :prop="otherFormProp.author1"
              >
                <el-input
                  v-model.trim="articleForm.author1"
                  class="ib"
                  maxlength="20"
                  style="width: calc(100% - 0px)"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item
                label="部门:"
                class="titletwolocation"
                :prop="otherFormProp.dept1"
                label-width="80px"
              >
                <el-select
                  v-model="parDepId[0]"
                  placeholder="请选择"
                  @change="getChildProject(0)"
                >
                  <el-option
                    v-for="item in depOptions1"
                    :key="item.depId"
                    :label="item.name"
                    :value="item.depId"
                  >
                  </el-option>
                </el-select>

                <el-select
                  v-model="articleForm.dept1"
                  placeholder="请选择"
                  style="margin-left: 0px"
                >
                  <el-option
                    v-for="item in depOptionsSon[0]"
                    :key="item.depId"
                    :label="item.name"
                    :value="item.depId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="visible.moreAuthor">
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="第二作者:"
                  class="titletwolocation"
                  prop="author2"
                >
                  <el-input
                    v-model="articleForm.author2"
                    class="ib"
                    maxlength="20"
                    style="width: calc(100% - 0px)"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept2"
                  label-width="80px"
                >
                  <el-select
                    v-model="parDepId[1]"
                    placeholder="请选择"
                    @change="getChildProject(1)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept2"
                    placeholder="请选择"
                    style="margin-left: 0px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[1]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="第三作者:"
                  class="titletwolocation"
                  prop="author3"
                >
                  <el-input
                    v-model="articleForm.author3"
                    class="ib"
                    maxlength="20"
                    style="width: calc(100% - 0px)"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept3"
                  label-width="80px"
                >
                  <el-select
                    v-model="parDepId[2]"
                    placeholder="请选择"
                    @change="getChildProject(2)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept3"
                    placeholder="请选择"
                    style="margin-left: 0px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[2]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="第四作者:"
                  class="titletwolocation"
                  prop="author4"
                >
                  <el-input
                    v-model="articleForm.author4"
                    class="ib"
                    maxlength="20"
                    style="width: calc(100% - 0px)"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept4"
                  label-width="80px"
                >
                  <el-select
                    v-model="parDepId[3]"
                    placeholder="请选择"
                    @change="getChildProject(3)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept4"
                    placeholder="请选择"
                    style="margin-left: 0px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[3]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="第五作者:"
                  class="titletwolocation"
                  prop="author5"
                >
                  <el-input
                    v-model="articleForm.author5"
                    class="ib"
                    maxlength="20"
                    style="width: calc(100% - 0px)"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept5"
                  label-width="80px"
                >
                  <el-select
                    v-model="parDepId[4]"
                    placeholder="请选择"
                    @change="getChildProject(4)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept5"
                    placeholder="请选择"
                    style="margin-left: 0px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[4]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="第六作者:"
                  class="titletwolocation"
                  prop="author6"
                >
                  <el-input
                    v-model="articleForm.author6"
                    class="ib"
                    maxlength="20"
                    style="width: calc(100% - 0px)"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept6"
                  label-width="80px"
                >
                  <el-select
                    v-model="parDepId[5]"
                    placeholder="请选择"
                    @change="getChildProject(5)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept6"
                    placeholder="请选择"
                    style="margin-left: 0px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[5]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="第七作者:"
                  class="titletwolocation"
                  prop="author7"
                >
                  <el-input
                    v-model="articleForm.author7"
                    class="ib"
                    maxlength="20"
                    style="width: calc(100% - 0px)"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept7"
                  label-width="80px"
                >
                  <el-select
                    v-model="parDepId[6]"
                    placeholder="请选择"
                    @change="getChildProject(6)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept7"
                    placeholder="请选择"
                    style="margin-left: 0px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[6]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item
                  label="第八作者:"
                  class="titletwolocation"
                  prop="author8"
                >
                  <el-input
                    v-model="articleForm.author8"
                    class="ib"
                    maxlength="20"
                    style="width: calc(100% - 0px)"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept8"
                  label-width="80px"
                >
                  <el-select
                    v-model="parDepId[7]"
                    placeholder="请选择"
                    @change="getChildProject(7)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept8"
                    placeholder="请选择"
                    style="margin-left: 0px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[7]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form-item>
      </el-row>
      <template
        v-if="city_name == 'cz' && cz_mtbd_channelId.includes(this.channelId)"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="投稿媒体" :prop="otherFormProp.medium">
              <el-input
                v-model="articleForm.medium"
                maxlength="30"
                style="width: calc(100% - 0px)"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="媒体发表时间"
              class="titletwolomtlxcation"
              :prop="otherFormProp.mediumTime"
            >
              <el-date-picker
                v-model="articleForm.mediumTime"
                type="date"
                placeholder="选择日期"
                :clearable="false"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="媒体类型"
              class="titletwolocation"
              :prop="otherFormProp.mtlx"
            >
              <el-select
                v-model="articleForm.mtlx"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in czMtlxOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="版面" :prop="otherFormProp.banmian">
              <el-input
                v-model="articleForm.banmian"
                maxlength="30"
                style="width: calc(100% - 0px)"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投稿备注" :prop="otherFormProp.tgbz">
              <el-input
                v-model="articleForm.tgbz"
                maxlength="30"
                style="width: calc(100% - 0px)"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template
        v-if="city_name == 'yc' && yc_xxfl_channelId.includes(this.channelId)"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="信息分类">
              <el-select
                v-model="articleForm.xxfl"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in ycXxflOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <el-row v-if="visible.biaotitupian">
        <el-col :span="16">
          <el-form-item label="标题图片">
            <div class="tupianxinwenBox" style="display: flex">
              <el-upload
                class="avatar-uploader"
                :action="uploadFileUrl"
                :show-file-list="false"
                :on-success="handleChangeBttp"
                :before-upload="beforeAvatarUpload"
                :on-error="handleUploadError"
                :data="{ siteAlias: siteRow.alias || null, fileType: 'images' }"
                :headers="headers"
              >
                <img v-bind:src="titleImg.url" v-if="titleImg" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-button
                @click="handleChangeBttp(null)"
                v-if="titleImg"
                type="danger"
                style="display: inline-block"
                >取消</el-button
              >
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="visible.yigaoduotou">
        <el-form-item label="一稿多投与附带:">
          <el-row>
            <el-form-item
              label="附带到网站其它栏目："
              class="titletwolocation"
              label-width="170px"
            >
              <el-col :span="16">
                <el-input
                  v-model="cloumnName[0]"
                  class="ib"
                  v-if="false"
                ></el-input>
                <el-input
                  v-model="cloumnName[articleForm.siteAlias]"
                  class="ib"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button
                  @click="
                    shareCloumn(
                      null,
                      '选择本网站其他栏目',
                      articleForm.siteAlias
                    )
                  "
                  >选择栏目</el-button
                >
                <el-button @click="cacleShare(articleForm.siteAlias, null)"
                  >取消</el-button
                >
              </el-col>
            </el-form-item>
          </el-row>

          <el-row v-for="(item, k) in canYigaoduotouList" :key="k">
            <el-form-item
              :label="'附带到' + item.name + '：'"
              class="titletwolocation"
              label-width="170px"
            >
              <el-col :span="16">
                <el-input
                  v-model="cloumnName[item.siteAlias]"
                  class="ib"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button
                  @click="
                    shareCloumn(
                      item.siteId,
                      `选择${item.name}其他栏目`,
                      item.siteAlias
                    )
                  "
                  >选择栏目</el-button
                >
                <el-button @click="cacleShare(item.siteAlias, item.siteId)"
                  >取消</el-button
                >
              </el-col>
            </el-form-item>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row v-if="visible.waibuUrl">
        <el-form-item label="启用外部链接:" :prop="otherFormProp.externalLinks">
          <el-row>
            <el-col :span="12">
              <el-input v-model="articleForm.externalLinks"></el-input>
            </el-col>
            <el-col :span="3">
              <el-checkbox
                v-model="articleForm.useExternalLinks"
                @change="change3"
                :true-label="1"
                :false-label="0"
                >启用外部链接</el-checkbox
              >
            </el-col>
            <el-col :span="8">
              <span> 请确保输入的链接完整且是可用的！(http://...)</span>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row v-if="visible.zhaiyao">
        <el-form-item label="摘要:">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="articleForm.summary"
            maxlength="1000"
            style="width: calc(100% - 0px)"
            show-word-limit
          />
        </el-form-item>
      </el-row>
      <!-- 显示隐藏编辑区 -->
      <el-row>
        <el-form-item label="显示隐藏编辑区">
          <el-button
            @click="visible.shijian = !visible.shijian"
            v-hasRole="['admin']"
            v-hasPermi="['system:article:time']"
            >{{ visible.shijian ? "隐藏" : "显示" }}时间编辑区</el-button
          >
          <el-button @click="visible.fubiaoti = !visible.fubiaoti"
            >{{ visible.fubiaoti ? "隐藏" : "显示" }}副标题</el-button
          >
          <el-button @click="visible.moreAuthor = !visible.moreAuthor"
            >{{ visible.moreAuthor ? "隐藏" : "显示" }}更多作者</el-button
          >
          <el-button @click="visible.biaotitupian = !visible.biaotitupian"
            >{{ visible.biaotitupian ? "隐藏" : "显示" }}标题图片</el-button
          >
          <el-button
            @click="visible.yigaoduotou = !visible.yigaoduotou"
            v-if="city_name != 'dwdt'"
            >{{
              visible.yigaoduotou ? "隐藏" : "显示"
            }}一稿多投与附带发布</el-button
          >
          <el-button @click="visible.waibuUrl = !visible.waibuUrl"
            >{{ visible.waibuUrl ? "隐藏" : "显示" }}外部链接编辑区</el-button
          >
          <el-button @click="visible.zhaiyao = !visible.zhaiyao"
            >{{ visible.zhaiyao ? "隐藏" : "显示" }}摘要</el-button
          >
        </el-form-item>
      </el-row>
      <el-row v-if="visible.biaoqian">
        <el-form-item label="标签:"> </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="内容:" class="wangeditor">
          <el-checkbox v-model="shouhangsuojin">段落首行缩进</el-checkbox>
          <!-- <el-tooltip class="item" effect="dark" content="取消第一段缩进" placement="top-start">
            <el-checkbox v-model="biaoti">标题</el-checkbox>
          </el-tooltip> -->

          <el-button @click="formatText">自动排版</el-button>
          <!-- <el-button @click="uploadBigVideo">上传大视频</el-button> -->
          <!--  不要了。直接从文件库上传 -->
          <!-- <Uploader
            @input="onBigFileSuccess"
            :siteAlias="siteRow.alias || null"
            @progress="onBigFileProgress"
            v-if="false||city_name == 'dwdt'"
          ></Uploader> -->
          <template v-if="false">
            <el-upload
              style="display: inline-block"
              class="upload-demo"
              action="#"
              multiple
              :limit="1"
              :auto-upload="false"
              :show-file-list="false"
              :accept="'docx'"
              :on-change="handleChange"
            >
              <el-button size="small">上传word</el-button>
            </el-upload>
            <input
              id="document"
              type="file"
              value="上传word"
              @change="handleChange"
              v-if="false"
            />
          </template>
          <Wangeditor
            :template="articleForm.body"
            v-if="articleForm.body != null"
            @editorChange="editorChange"
            ref="wangEditor"
            :channelId="articleForm.channelId"
            @handleChangeBttp="handleChangeBttp"
            :enterIsP="true"
          ></Wangeditor>
        </el-form-item>
      </el-row>
    </el-form>

    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogCloumn"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar>
            <template #buttons>
              <vxe-button
                v-if="false"
                @click="$refs.xTree.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree.clearTreeExpand()"
                >全部关闭</vxe-button
              >
            </template>
          </vxe-toolbar>
          <vxe-table
            v-if="dialogCloumn"
            highlight-current-row
            highlight-hover-row
            row-key
            row-id="channelId"
            show-overflow
            ref="xTree"
            border="inner"
            :data="leftList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            :checkbox-config="{
              labelField: 'name',
              checkStrictly: true,
              checkMethod,
            }"
          >
            <vxe-column
              type="checkbox"
              tree-node
              show-overflow
              class="left-table"
            >
              <template #default="{ row }">
                <span>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="shareSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pinyin from "js-pinyin";
import mammoth from "mammoth";
import axios from "axios";
import { Loading } from "element-ui";
import Wangeditor from "@/components/wangEditor";
import Uploader from "@/components/Uploader";
import { listDep, subList } from "@/api/extendApplication/complaints.js";
import {
  getChannelListForTree,
  getChannelListForYigaoduotou,
} from "@/api/content/clounm";
import { validURL } from "@/utils/validate";

import {
  validateHeader,
  getParentDep,
  duplicateSubmissionList,
  deleteArticleFiles,
} from "@/api/content/article";

import { mapState } from "vuex";
import { getToken } from "@/utils/auth";

export default {
  props: {
    articleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    shridsname: "", //审核人  workflowStatuId  9||11
    dept1: {},
    dept2: {},
    dept3: {},
    dept4: {},
    dept5: {},
    dept6: {},
    dept7: {},
    image: {},
    imageCache: {},
    imgNews: {},
    author1: {},
    header: {},
    createdDate: {},
    expiredDateForIndex: {},
    channelId: String,
    siteId: String,

    showMessage: Boolean,
    showDsfb: Boolean,
  },
  data() {
    var validURL2 = (rule, value, callback) => {
      let flag = validURL(this.articleForm.externalLinks);
      if (!flag) {
        return callback("链接格式不正确");
      } else {
        return callback();
      }
    };

    return {
      //  国网 地市 省公司  表单验证的字段    用于表单验证，不可修改
      otherFormProp: {
        header: "header",
        zrbjr: "zrbjr",
        author1: "author1",
        dept1: "dept1",
        medium: "medium",
        externalLinks: "externalLinks",
        mediumTime: "mediumTime",
        mtlx: "mtlx",
        banmian: "banmian",
      },
      fileType: ["jpg", "png", "jepg", "jfif"],
      // 运城特殊功能 信息分类  的部分栏目id
      yc_xxfl_channelId: [],

      // 长治特殊功能 媒体报道  的部分栏目id
      cz_mtbd_channelId: [],
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      imageUrl: "",
      headers: {
        Authorization: getToken(),
      },
      articleFormRule: {
        externalLinks: [
          { required: true, validator: validURL2, trigger: "blur" },
        ],
        shrids: [{ required: true, message: "请选择审核人", trigger: "blur" }],
        header: {
          required: true,
          message: "请输入标题",
          trigger: "blur",
        },
        author1: {
          required: true,
          message: "请输入作者",
          trigger: "blur",
        },
        dept1: [
          {
            required: true,
            message: "请选择部门",
            trigger: "blur",
          },
        ],

        // 长治
        medium: [
          { required: true, message: "请输入投稿媒体", trigger: "blur" },
        ],

        mediumTime: [
          { required: true, message: "请选择发表时间", trigger: "blur" },
        ],

        mtlx: [{ required: true, message: "请选择媒体类型", trigger: "blur" }],

        banmian: [{ required: true, message: "请输入版面", trigger: "blur" }],

        // 运城
        xxfl: [{ required: true, message: "请输入信息分类", trigger: "blur" }],
      },
      //即时时间
      currentTimeChecked: false,
      shouhangsuojin: true,
      biaoti: false,
      //部门选项
      parDepId: [],
      depOptions1: [],
      depOptionsSon: [],

      visible: {
        shijian: false,
        yigaoduotou: false,
        zhaiyao: false,
        fubiaoti: false,
        moreAuthor: false,
        waibuUrl: false,
        biaoqian: false,
        biaotitupian: false,
      },

      //选中的栏目id'
      cloumnId: [],
      // cloumnName: [
      //   "请选择栏目",
      //   "请选择栏目",
      //   "请选择栏目",
      //   "请选择栏目",
      //   "请选择栏目",
      // ],
      cloumnName: {},
      //一稿多投中  当前点击的站点别名。id
      siteAlias: null,
      siteAliasId: null,
      //一稿多投对话框
      title: "",
      dialogCloumn: false,
      //对话框中左侧 栏目 列表
      leftList: [],

      initPStyle:
        "text-indent: 2em;  font-size: 1em; font-weight: normal; color: #000",
      initPStyle2: "  font-size: 1em; font-weight: normal; color: #000",
      articleFormCache: "",
      headerChange: false,

      yigaoduotouId: {},
      //可以一稿多投的列表
      canYigaoduotouList: [],

      // 长治媒体类型
      czMtlxOptions: [],
      // 运城信息分类
      ycXxflOptions: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },

  components: { Wangeditor, Uploader },

  computed: {
    ...mapState({
      siteRow: (state) => state.column.siteRow,
      roles: (state) => state.user.roles,
      city_name: (state) => state.user.city_name,
    }),
    imageLength() {
      return this.articleForm?.imageCache?.length;
    },
    titleImg() {
      let titleImg = this.articleForm?.imageCache?.find((item) => {
        return item.titleImg == 1;
      });

      return titleImg;
    },
  },
  mounted() {
    this.getDuplicateSubmissionList();
    if (this.city_name == "cz") {
      this.getDicts("cz_mtlx").then((response) => {
        this.czMtlxOptions = response.data;
      });
      this.getConfigKey("cz_mtbd_channelId").then((response) => {
        this.cz_mtbd_channelId = response.msg.split(",");
      });
    } else if (this.city_name == "yc") {
      this.getDicts("yc_xxfl").then((response) => {
        this.ycXxflOptions = response.data;
      });
      this.getConfigKey("yc_xxfl_channelId").then((response) => {
        this.yc_xxfl_channelId = response.msg.split(",");
      });
    } else if (this.city_name == "dwdt") {
      this.otherFormProp = {};
      this.visible.biaotitupian = true;
      // 将初始化 内容  放在方法中。
      // this.$nextTick(() => {
      //   console.log(1);
      //   this.$emit("update:header", "《山西电网动态》简报 ");
      //   this.$emit("update:author1", "新闻中心");
      // });
    }
  },
  watch: {
    "articleForm.header"(val, old) {
      if (this.articleFormCache.header && val != this.articleFormCache.header) {
        this.headerChange = true;
      } else {
        this.headerChange = false;
      }
    },
  },
  methods: {
    // 上传附件
    handleChange(file, fileList) {
      console.log("🚀 ~ file: base.vue ~ line 542 ~ handleChange ~ file", file);
      // const loading = this.$loading({
      //   lock: true,
      //   text: "正在解析",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      // setTimeout(() => {
      //   this.$confirm("文件解析错误，请联系管理员", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   })
      //     .then(() => {
      //       loading.close();
      //     })
      //     .catch(() => {
      //       this.$message({
      //         type: "info",
      //         message: "已取消删除",
      //       });
      //     });
      // }, 1000);
      // return;

      let a = URL.createObjectURL(file.raw);

      console.log(" a: ", a);

      var vm = this;
      var xhr = new XMLHttpRequest();
      xhr.open("get", a, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = () => {
        if (xhr.status == 200) {
          mammoth
            .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
            .then((resultObject) => {
              vm.$nextTick(() => {
                // document.querySelector("#wordView").innerHTML =
                //   resultObject.value;
                // vm.vHtml = resultObject.value;
                // this.editorChange(resultObject.value);
                this.$refs.wangEditor.editor.txt.html(resultObject.value);
              });
            });
        }
      };
      xhr.send();
      return;
      let d = document.getElementById("document");
      console.log(" d: ", d);

      let b = document.querySelector(".upload-demo .el-upload__input");
      console.log("b: ", b);
      console.log("b: ", b.value);
      console.log("file, fileList: ", file, fileList);
    },

    //获取父部门列表
    async getDepOptiontList() {
      this.$nextTick(() => {
        this.articleFormCache = JSON.parse(JSON.stringify(this.articleForm));
      });
      await listDep({ siteId: this.siteId || this.articleForm.siteId }).then(
        (res) => {
          if (res.code == 200) {
            // res.data.forEach((item, index) => {
            //   item.value = item.siteId;
            //   item.label = item.siteName;
            //   item.departmentList.forEach((item2, index2) => {
            //     item2.value = item2.depId;
            //     item2.label = item2.name;
            //   });
            // });
            this.depOptions1 = res.data;
            this.$nextTick(() => {
              if (this.city_name == "dwdt" && !this.articleForm.articleId) {
                this.parDepId[0] = +res.data[0].depId;
                console.log("this.parDepId[0]: ", this.parDepId[0]);
                this.getChildProject(0);
                this.$emit("update:author1", "新闻中心");
                this.handleChangeBttp({
                  msg: "操作成功",
                  realName: "电网动态标题图片.jpg",
                  code: 200,
                  storeName: "201911/157302424870779371.jpg",
                  url: "/homepage/dwdt/images/201911/157302424870779371.jpg",
                });
              }
            });
          }
        }
      );
      console.log("5.1获取父部门列表", this.depOptions1);

      let {
        dept1: a,
        dept2: b,
        dept3: c,
        dept4: d,
        dept5: e,
        dept6: f,
        dept7: g,
        dept8: h,
      } = this.articleForm;
      console.log("  fsadfasdf", {
        dept1: a,
        dept2: b,
        dept3: c,
        dept4: d,
        dept5: e,
        dept6: f,
        dept7: g,
        dept8: h,
      });
      console.log("5.2获取父部门id");
      if (a && a != 0) {
        await this.getFatherDepId(0, a);
      }
      if (b && b != 0) {
        await this.getFatherDepId(1, b);
      }
      if (c && c != 0) {
        await this.getFatherDepId(2, c);
      }
      if (d && d != 0) {
        await this.getFatherDepId(3, d);
      }
      if (e && e != 0) {
        await this.getFatherDepId(4, e);
      }
      if (f && f != 0) {
        await this.getFatherDepId(5, f);
      }
      if (g && g != 0) {
        await this.getFatherDepId(6, g);
      }
      if (h && h != 0) {
        await this.getFatherDepId(7, h);
      }

      // b && b != 0 && (await this.getFatherDepId(1, b));
      // c && c != 0 && (await this.getFatherDepId(2, c));
      // d && d != 0 && (await this.getFatherDepId(3, d));
      // e && e != 0 && (await this.getFatherDepId(4, e));
      // f && f != 0 && (await this.getFatherDepId(5, f));
      // g && g != 0 && (await this.getFatherDepId(6, g));
      // h && h != 0 && (await this.getFatherDepId(7, h));

      //多个作者的话。不会渲染出来label 只有value，。但为true 就能显示出来。
      this.$nextTick(() => {
        this.visible.moreAuthor = true;
        this.visible.moreAuthor = false;
      });
    },
    //获取父部门id
    async getFatherDepId(length, depId) {
      console.log("length, depId: ", length, depId);
      await getParentDep({ depId }).then(async (res) => {
        this.parDepId[length] = res.data.depId;

        res.data.depId && (await this.getChildProject(length, true));
        console.log("5.3获取子部门列表", this.depOptionsSon);
      });
    },
    //父部门变化时 修改子部门数据 获取子层数据
    async getChildProject(length, editLoad = false) {
      await subList({ parentId: this.parDepId[length] }).then((res) => {
        if (res.code == 200) {
          this.depOptionsSon[length] = res.data;

          if (res.data.length == 0) {
            this.$message.error("获取子部门数据失败");
            console.log(1);
            this.$emit(`update:dept${length + 1}`, null); //先制空
            return;
          }

          // 导致每次修改文章时，子部门一直为第一个。回显错误。
          if (editLoad) {
            return;
          }

          // 修改完一级部门后，默认显示第一个子部门   或者滞空
          switch (length) {
            case 0:
              this.$emit("update:dept1", res.data[0].depId); //不写会导致 子部门 渲染不出来。
              break;
            case 1:
              this.$emit("update:dept2", res.data[0].depId); //不写会导致 子部门 渲染不出来。
              break;
            case 2:
              this.$emit("update:dept3", res.data[0].depId); //不写会导致 子部门 渲染不出来。
              break;
            case 3:
              this.$emit("update:dept4", res.data[0].depId); //不写会导致 子部门 渲染不出来。
              break;
            case 4:
              this.$emit("update:dept5", res.data[0].depId); //不写会导致 子部门 渲染不出来。
              break;
            case 5:
              this.$emit("update:dept6", res.data[0].depId); //不写会导致 子部门 渲染不出来。
              break;
            case 6:
              this.$emit("update:dept7", res.data[0].depId); //不写会导致 子部门 渲染不出来。
              break;
            case 7:
              this.$emit("update:dept8", res.data[0].depId); //不写会导致 子部门 渲染不出来。
              break;
            default:
              break;
          }
        } else {
          this.$message.error("获取数据失败");
        }
      });
    },
    //打开分享对话框
    shareCloumn(siteId, title, siteAlias) {
      this.siteAlias = siteAlias;
      this.siteAliasId = siteId || this.siteId;
      new Promise((resolve, reject) => {
        if (siteId) {
          getChannelListForYigaoduotou({
            siteId: this.siteAliasId,
            siteAlias: siteAlias,
          }).then((res) => {
            resolve(res);
          });
        } else {
          getChannelListForTree({ siteId: this.siteId }).then((res) => {
            resolve(res);
          });
        }
      })
        .then((res) => {
          this.leftList = this.handleTree(res.data, "channelId").filter(
            (item) => item.parentId == this.siteAliasId
          );
        })
        .then(() => {
          this.dialogCloumn = true;
          this.title = title;
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.leftList[0], true);
          });
        });
    },
    //获取编辑器里面的东西再传给页面内
    editorChange(templete) {
      this.$emit("update:body", templete);
    },
    //分享对话框  确认按钮
    shareSure() {
      let selection = this.$refs.xTree.getCheckboxRecords();
      this.cloumnId = selection.map((item) => item.channelId).join(",");
      let name = selection.map((item) => item.name).join(",");
      this.cloumnName[this.siteAlias] = name;

      let obj = {
        siteId: this.siteAliasId,
        siteAlias: this.siteAlias,
        channelIds: this.cloumnId,
      };
      this.$emit("changeYigaoduotouId", obj);
      this.cacle();
      return;
      switch (this.siteAlias) {
        case "ling":
          this.yigaoduotouId.contributeToOtherChannelId = this.cloumnId;
          // this.$emit("update:contributeToOtherChannelId", this.cloumnId); //网站其它栏目
          break;
        case "one":
          this.yigaoduotouId.contributeToOppositeChannelId = this.cloumnId;

          // this.$emit("update:contributeToOppositeChannelId", this.cloumnId); //附带到办公网栏目：
          break;
        case "two":
          this.yigaoduotouId.contributeToSxChannelId = this.cloumnId;

          // this.$emit("update:contributeToSxChannelId", this.cloumnId); //附带到系统网栏目：
          break;
        case "three":
          this.yigaoduotouId.contributeToWChannelId = this.cloumnId;

          // this.$emit("update:contributeToWChannelId", this.cloumnId); //附带到省公司外部网：
          break;
        case "four":
          this.yigaoduotouId.contributeToOtherChannelId = this.cloumnId;

          // this.$emit("update:contributeToOtherChannelId", this.cloumnId); //省公司外部网
          break;
        default:
          break;
      }
      this.$emit("yigaoduotouId", this.yigaoduotouId);
      this.cacle();
    },
    //取消一稿多投
    cacleShare(siteAlias, siteId) {
      /*****不要删除 */
      this.$set(this.cloumnName, siteAlias, null);
      this.cloumnName = Object.assign({}, this.cloumnName, { siteAlias: null });
      /*****不要删除 */
      let obj = {
        siteId: siteId || this.siteId,
        channelIds: null,
      };
      this.$emit("changeYigaoduotouId", obj);

      return;
      switch (siteAlias) {
        case "ling":
          this.yigaoduotouId.contributeToOtherChannelId = [];
          // this.$emit("update:contributeToOtherChannelId", this.cloumnId); //网站其它栏目
          break;
        case "one":
          this.yigaoduotouId.contributeToOppositeChannelId = [];

          // this.$emit("update:contributeToOppositeChannelId", this.cloumnId); //附带到办公网栏目：
          break;
        case "two":
          this.yigaoduotouId.contributeToSxChannelId = [];

          // this.$emit("update:contributeToSxChannelId", this.cloumnId); //附带到系统网栏目：
          break;
        case "three":
          this.yigaoduotouId.contributeToWChannelId = [];

          // this.$emit("update:contributeToWChannelId", this.cloumnId); //附带到省公司外部网：
          break;
        case "four":
          this.yigaoduotouId.contributeToOtherChannelId = [];
          // this.$emit("update:contributeToOtherChannelId", this.cloumnId); //省公司外部网
          break;
        default:
          break;
      }
      this.$emit("yigaoduotouId", this.yigaoduotouId);
    },
    //哪些可以一稿多投
    getDuplicateSubmissionList() {
      duplicateSubmissionList({ siteId: this.siteId }).then((res) => {
        this.canYigaoduotouList = res.data;
        res.data.forEach((item) => {
          this.cloumnName[item.siteAlias] = "";
        });
      });
    },
    validHeader2() {
      if (!this.headerChange) return;
      validateHeader({
        channelId: this.channelId,
        header: this.articleForm.header,
      }).then((res) => {
        this.articleHeaderCopy = res.data;
        if (res.data) {
          this.$notify({
            title: "提示",
            type: "warning",
            message: "本栏目下已有此标题的文章存在！",
          });
        }
      });
    },
    // 标题图片上传或删除。   编辑器手动修改标题图片   两个方法好像一样，可以合并
    async handleChangeBttp(res) {
      console.log("res: ", res);
      // if (res) {
      //   res.storeName = res?.url;
      // }
      // this.imageUrl = res.url;
      console.log(
        "🚀 ~ file: base.vue:1017 ~ deleteArticleFiles ~ this.titleImg",
        this.titleImg
      );
      // this.visible.biaotitupian = res ? true : false;

      this.$emit("changeBiaotiTupian", res);
      // 如果删除标题图片  进行手动清空editor回调的imgNode
      if (!res || res.code) {
        //         console.log(
        //           "this.$refs.wangEditor.bttpActiveNote: ",
        //           this.$refs.wangEditor.bttpActiveNote
        //         );
        if (this.$refs.wangEditor.bttpActiveNote) {
          this.$refs.wangEditor.bttpActiveNote.className = "";
        }
        this.articleForm.body = this.articleForm.body.replaceAll(
          "bttp-active",
          ""
        );
      }
      this.loading?.close();
    },
    // 编辑器手动修改标题图片
    // handleChangeBttp(imgAttr){
    //   this.$emit("changeBiaotiTupian", imgAttr);
    //   console.log('imgAttr: ', imgAttr);

    // },
    // 上传失败
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
    beforeAvatarUpload(file) {
      // 校检文件类型
      let fileExtension = "";
      if (file.name.lastIndexOf(".") > -1) {
        fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
      }
      const isTypeOk = this.fileType.some((type) => {
        if (file.type.indexOf(type) > -1) return true;
        if (fileExtension && fileExtension.indexOf(type) > -1) return true;
        return false;
      });
      if (!isTypeOk) {
        this.$message.error(
          `文件格式不正确, 请上传${this.fileType.join(" ， ")}格式文件!`
        );
        return false;
      }
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    cacle() {
      this.dialogCloumn = false;
      this.cloumnId = [];
    },
    formatText() {
      //选择全部内容
      var html = this.$refs.wangEditor.editor.$textElem.elems[0].childNodes;
      console.log("html: ", html);
      //选择 选中的文字
      // var html1 = this.$refs.wangEditor.editor.selection.getSelectionContainerElem()
      //   .elems[0];
      // var html;
      // if (html1.nodeName == "DIV") {
      //   html = html1.childNodes;
      // } else if (html1.nodeName == "P") {
      //   html = html1;
      // }

      if (html.length > 0) {
        // html.reduce((item) => {
        // js 遍历删除dom元素后，导致dom原数组缩短，导致遍历不完整。。这个咋解决来着//？？    //从后往前遍历
        for (var i = html.length - 1; i >= 0; i--) {
          let item = html[i];

          if (i == 0 && this.biaoti) {
            item.style.cssText = this.initPStyle2;
            continue;
          }
          item.innerHTML =
            // '<p class="replace">' +
            item.innerHTML
              // .replace(/\s/gi, "")

              .replace(/<br\s*\/?>/gi, "")
              // .replace(/<div/gi, "<p")
              // .replace(/<\/div/gi, "</p")
              .replace(/(&nbsp;)+/gi, "&nbsp;") //  多个空格转换  为 一个空格
              .trim();
          // + '</p>';

          if (item.innerHTML.length == 0) {
            item.parentNode.removeChild(item);
          }
          console.log("item.innerHTML: ", item.innerHTML);

          // 富文本编辑的内容默认外层都是由p标签包容，所以直接在p标签上进行设置默认排版的样式
          /**
           * wangeditor  源码 缩进 采用的是paddingleft  已改为text-indent 首行缩进
           */
          if (item.nodeName == "P") {
            if (this.shouhangsuojin) {
              item.style.cssText = this.initPStyle;
            } else {
              item.style.cssText = this.initPStyle2;
            }
          }
          if (item.childNodes.length > 0) {
            console.log("item: ", item);
            // 遍历找到子元素中存在img标签的内容进行设置默认样式
            item.childNodes.forEach((child) => {
              if (child.localName == "img") {
                // 获取原图width、height
                let width = child.width;
                let height = child.height;
                let ratio = width / height;
                let setW = 600;
                let setH = 0; // 等比计算
                if (setW / setH != ratio) {
                  setH = setW / ratio;
                }
                // 给img标签设置行内样式
                child.setAttribute("width", setW);
                child.setAttribute("height", setH);
                item.style.cssText = "text-align: center";
              }
              if (child.localName == "video") {
                item.style.cssText = "text-align: center";
              }
            });
          }
          // this.$refs.wangEditor.editor.txt.html(html);
        }
      }
    },

    formatText2() {
      var html = this.articleForm.body;
      html = this.doFormatText(html);

      if (true) {
        html = '<div style="text-indent:2em">' + html + "</div>";
      }
    },
    doFormatText(editorhtml) {
      var tempimg = new Array();
      var temptable = new Array();
      var tempobject = new Array();
      var tmpDiv = document.createElement("DIV");

      editorhtml = editorhtml.replace(
        /<div style="page-break-after: always;?">\s*<span style="display: none;?">&nbsp;<\/span>\s*<\/div>/gi,
        "<p>[page]</p>"
      );

      tmpDiv.innerHTML = editorhtml
        .replace(/&nbsp;/gi, "")
        .replace(/<div/gi, "<p")
        .replace(/<\/div/gi, "</p");

      //判断是否是  ie浏览器
      if (window.navigator.userAgent.toLowerCase().indexOf("msie") > 0) {
        tmpDiv.innerHTML = tmpDiv.innerHTML.replace(/<\/p>/gi, "<br /></p>");
      }

      //获取  table  标签
      var tables = tmpDiv.getElementsByTagName("TABLE");

      if (tables != null && tables.length > 0) {
        for (var j = 0; j < tables.length; j++) {
          //获取描述元素（包括其后代）的序列化HTML片段
          temptable[temptable.length] = tables[j].outerHTML;
        }
        var formattableCount = 0;
        for (var j = 0; j < tables.length; ) {
          tables[j].outerHTML = "#FormatTableID_" + formattableCount + "#";
          formattableCount++;
        }
      }

      //获取  OBJECT  标签
      var objects = tmpDiv.getElementsByTagName("OBJECT");
      if (objects != null && objects.length > 0) {
        for (var j = 0; j < objects.length; j++) {
          tempobject[tempobject.length] = objects[j].outerHTML;
        }
        var formatobjectCount = 0;
        for (var j = 0; j < objects.length; ) {
          objects[j].outerHTML = "#FormatObjectID_" + formatobjectCount + "#";
          formatobjectCount++;
        }
      }

      //获取  IMG  标签
      var imgs = tmpDiv.getElementsByTagName("IMG");
      if (imgs != null && imgs.length > 0) {
        for (var j = 0; j < imgs.length; j++) {
          var t = document.createElement("IMG");
          t.alt = imgs[j].alt;
          t.src = imgs[j].src;
          t.width = imgs[j].width;
          t.height = imgs[j].height;
          t.align = imgs[j].align;
          tempimg[tempimg.length] = t;
        }
        var formatImgCount = 0;
        for (var j = 0; j < imgs.length; ) {
          imgs[j].outerHTML = "#FormatImgID_" + formatImgCount + "#";
          formatImgCount++;
        }
      }

      //获取  b  标签
      //
      var strongarray = new Array();
      var strongcount = 0;
      let a = tmpDiv.getElementsByTagName("b");
      for (var i = 0; i < a.length; i++) {
        strongarray[strongcount] = tmpDiv
          .getElementsByTagName("b")
          [i].innerText.trim();
        tmpDiv.getElementsByTagName("b")[i].innerHTML =
          "#FormatStrongID_" + strongcount + "_FormatStrongID#";
        strongcount++;
      }
      let s = tmpDiv.getElementsByTagName("strong");
      for (var i = 0; i < s.length; i++) {
        strongarray[strongcount] = tmpDiv
          .getElementsByTagName("strong")
          [i].innerText.trim();
        tmpDiv.getElementsByTagName("strong")[i].innerHTML =
          "#FormatStrongID_" + strongcount + "_FormatStrongID#";
        strongcount++;
      }

      var html = this.processFormatText2(tmpDiv.innerText);
      for (var i = 0; i < strongcount; i++) {
        html = html.replace(
          "#FormatStrongID_" + i + "_FormatStrongID#",
          "<strong>" + strongarray[i] + "</strong>"
        );
      }

      html = this.processFormatText(html);
      html = html.replace(
        /<p>\[page\]<\/p>/gi,
        '<div style="page-break-after: always;"><span style="display: none;">&nbsp;</span></div>'
      );
      if (temptable != null && temptable.length > 0) {
        for (var j = 0; j < temptable.length; j++) {
          var tablehtml = temptable[j];
          html = html.replace("#FormatTableID_" + j + "#", tablehtml);
        }
      }

      if (tempobject != null && tempobject.length > 0) {
        for (var j = 0; j < tempobject.length; j++) {
          var objecthtml = '<p align="center">' + tempobject[j] + "</p>";
          html = html.replace("#FormatObjectID_" + j + "#", objecthtml);
        }
      }

      if (tempimg != null && tempimg.length > 0) {
        for (var j = 0; j < tempimg.length; j++) {
          var imgheight = "";
          var imgwidth = "";
          if (tempimg[j].height != 0)
            imaheight = ' height="' + tempimg[j].height + '"';
          if (tempimg[j].width != 0)
            imgwidth = ' width="' + tempimg[j].width + '"';
          var imgalign = "";
          if (tempimg[j].align != "")
            imgalign = ' align="' + tempimg[j].align + '"';
          var imghtml =
            '<p align="center"><img src="' +
            tempimg[j].src +
            '" alt="' +
            tempimg[j].alt +
            '"' +
            imgwidth +
            " " +
            imgheight +
            ' align="' +
            tempimg[j].align +
            '" border="0"></p>';
          html = html.replace("#FormatImgID_" + j + "#", imghtml);
        }
      }

      while (html.indexOf("</p></p>") != -1)
        html = html.replace("</p></p>", "</p>");
      while (html.indexOf('<p><p align="center">') != -1)
        html = html.replace('<p><p align="center">', '<p align="center">');

      return html;
    },
    DBC2SBC(str) {
      var result = "";
      for (var i = 0; i < str.length; i++) {
        var code = str.charCodeAt(i);
        // “65281”是“！”，“65373”是“｝”，“65292”是“，”。不转换"，"

        if (code >= 65281 && code < 65373 && code != 65292 && code != 65306) {
          //  “65248”是转换码距
          result += String.fromCharCode(str.charCodeAt(i) - 65248);
        } else {
          result += str.charAt(i);
        }
      }
      return result;
    },
    processFormatText(textContext) {
      var text = this.DBC2SBC(textContext);
      var prefix = "";
      var tmps = text.split("\n");
      var html = "";
      for (var i = 0; i < tmps.length; i++) {
        var tmp = tmps[i].trim();
        if (tmp.length > 0) {
          var reg = /#Format[A-Za-z]+_\d+#/gi;
          var f = reg.exec(tmp);
          if (f != null) {
            tmp = tmp.replace(/#Format[A-Za-z]+_\d+#/gi, "");
            html += f;
            if (tmp != "") {
              html += tmp;
            }
          } else {
            html += tmp;
          }
        }
      }
      return html;
    },
    processFormatText2(textContext) {
      var text = this.DBC2SBC(textContext);
      var prefix = "";
      var tmps = text.split("\n");
      var html = "";
      var paraStr = "";
      for (var i = 0; i < tmps.length; i++) {
        var tmp = tmps[i].trim();
        if (tmp.length > 0) {
          paraStr = "";
          var k = tmp.indexOf("#FormatStrongID_");
          if (k == -1) {
            paraStr = tmp;
          } else {
            for (; k != -1 && k <= tmp.length; ) {
              if (k == 0) {
                var kend = tmp.indexOf("_FormatStrongID#", k + 16);
                paraStr += tmp.substr(k, kend - k + 16);
                tmp = tmp.substr(kend + 16);
                k = tmp.indexOf("#FormatStrongID_");
              } else {
                paraStr += tmp.substr(0, k);
                tmp = tmp.substr(k);
                k = tmp.indexOf("#FormatStrongID_");
              }
            }
            if (tmp.length > 0) {
              paraStr += tmp;
            }
          }
          html += "<p>" + paraStr + "</p>\n";
        }
      }
      return html;
    },

    // 电网动态大视频上传成功回调
    onBigFileSuccess(file) {
      console.log("file: onBigFileSuccess", file);
      console.log(UA);
      let videoDom;
      if (UA == "firefox") {
        videoDom = `<p data-we-video-p="true"><video src="${file.url}" controls="controls" style="max-width:100%;"><span>当前浏览器版本过低，无法正常播放视频，请升级您的浏览器。</span></video></p><p>&#8203</p>`;
      } else {
        videoDom = `<video src="${file.url}" controls="controls" style="max-width:100%;"><span>当前浏览器版本过低，无法正常播放视频，请升级您的浏览器。</span></video><p data-we-empty-p=""><br></p>`;
      }
      console.log("videoDom: ", videoDom);

      //       let video = `
      // <p style="text-align: center;"><video src="${file.url}" controls="controls" style="max-width:100%" width="50%" class="editor-video editor-big-video"></video></p><p data-we-empty-p=""><br></p>
      // `;
      this.$refs.wangEditor.editor.cmd.do("insertHTML", `${videoDom}`);
      setTimeout(() => {
        let video = document.querySelector(
          '.w-e-text-container video[src="' + file.url + '"]'
        );
        console.log("video: ", video);

        let parentDom = video.parentNode;

        video.setAttribute("width", this.city_name == "dwdt" ? "80%" : "50%");

        video.setAttribute("class", "editor-video editor-big-video");

        parentDom.style.textAlign = "center";
      }, 100);
      // if (UA == "firefox") {
      //   this.$refs.wangEditor.editor.cmd.do(
      //     "insertHTML",
      //     `<p data-we-empty-p=""><br></p>`
      //   );
      // }
    },
    // 上传进度回调
    onBigFileProgress(uploadPercentage) {},
    //即时时间
    change1(value) {
      value && this.$emit("update:createdDate", new Date());
    },
    //设置同文章发表期限
    change2(value) {
      value &&
        this.$emit("update:expiredDateForIndex", this.articleForm.expiredDate);
    },
    //设置外部链接
    change3(value) {},
    //复选框方法，disable第一行的
    checkMethod({ row }) {
      return row.channelId != this.channelId;
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/tab-form-wangEditor.scss";

.article-base {
  margin: 0 0 0px 0;
  height: 100%;
}
::v-deep .codeEditor {
  .el-form-item__content {
    height: 500px;
    margin: 0 0 40px 0;
  }
}
// ::v-deep .el-form-item .wangeditor {
//   .el-form-item__content {
//     height: auto !important;
//     line-height: auto !important;
//   }
// }

.bottom {
  display: flex;
  // height: 500px;
  height: 50vh;
  .bottom_l {
    flex: 1;
    min-width: 240px;
    // max-width: 240px;
    background: #fffbf0;
    overflow: overlay;
    overflow: auto;
  }
}
table {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}

table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}

table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}

.el-col {
  border-right: 1px solid #ccc;
}
.el-col:last-child {
  border-right: none;
}
.el-row {
  border: 1px solid #ccc;
  margin-bottom: -1px !important;
}
.el-row .el-row {
  border-right: none;
  border-top: none;
  border-left: none;
}

// 标题图片上传
::v-deep .avatar-uploader {
  height: 160px;
  .el-upload {
    border: 1px dashed #4e4d4d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 4px;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 100%;
  width: auto;
  max-width: 100%;
  height: 150px;
  display: block;
}
.tupianxinwenBox {
  display: flex;
  // justify-content: space-between;
  align-items: flex-end;
}
</style>
<style lang="scss">
.no-secend {
  .el-time-spinner.has-seconds :nth-child(2) {
    display: none !important;
  }
}
</style>
